import { Popup, NavBar } from 'antd-mobile'

import CommentItem from '../CommentItem'
import CommentFooter from '../CommentFooter'
import CommentInput from '../CommentInput'
import NoneComment from '@/components/NoneComment'

import {
  ArtComment,
  ArticleComment,
  ArticleCommentResponse,
  AddArticleCommentResponse,
} from '@/types/data'
import { useEffect, useState } from 'react'
import http from '@/utils/http'

import styles from './index.module.scss'

type Props = {
  onClose: (commentId: string, total: number) => void
  commentItem: ArtComment
  onReplyThumbUp: (com_id: string, is_liking: boolean) => void
  articleId: string
}

const Reply = ({ onClose, commentItem, onReplyThumbUp, articleId }: Props) => {
  const [comment, setComment] = useState(commentItem)
  const [showPopup, setShowPopUp] = useState(false)
  const [reply, setReply] = useState<ArticleComment>({
    total_count: 0,
    end_id: null,
    last_id: null,
    results: [] as ArtComment[],
  })
  console.log(reply)

  useEffect(() => {
    const loadData = async () => {
      const res = await http.get<ArticleCommentResponse>('/comments', {
        params: {
          type: 'c',
          source: comment.com_id,
        },
      })

      setReply(res.data.data)
    }
    loadData()
  }, [comment.com_id])

  const onThumbUp = async () => {
    if (comment.is_liking) {
      await http.delete(`/comment/likings/${comment.com_id}`)
    } else {
      await http.post('/comment/likings', {
        target: comment.com_id,
      })
    }

    setComment({
      ...comment,
      is_liking: !comment.is_liking,
      like_count: comment.is_liking
        ? comment.like_count - 1
        : comment.like_count + 1,
    })

    onReplyThumbUp(comment.com_id, comment.is_liking)
  }

  const onAddComment = async (value: string) => {
    const res = await http.post<AddArticleCommentResponse>('/comments', {
      target: comment.com_id,
      content: value,
      art_id: articleId,
    })

    setReply({
      ...reply,
      total_count: reply.total_count + 1,
      results: [res.data.data.new_obj, ...reply.results],
    })

    onReplyPopupHide()
  }

  const onReplyPopupHide = () => setShowPopUp(false)

  const onReplyCommentThumbUp = async (com_id: string, is_liking: boolean) => {
    if (is_liking) {
      await http.delete(`/comment/likings/${com_id}`)
    } else {
      await http.post('/comment/likings', {
        target: com_id,
      })
    }

    setReply({
      ...reply,
      results: [
        ...reply.results.map((item) => {
          if (item.com_id === com_id) {
            return {
              ...item,
              is_liking: !is_liking,
              like_count: is_liking ? item.like_count - 1 : item.like_count + 1,
            }
          }
          return item
        }),
      ],
    })
  }

  const onBackToArticle = () => {
    onClose(comment.com_id, reply.total_count)
  }
  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        <NavBar className="transparent-navbar" onBack={onBackToArticle}>
          {reply.results.length}条回复
        </NavBar>

        {/* 要回复的评论 */}
        <div className="origin-comment">
          <CommentItem type="origin" {...comment} onThumbUp={onThumbUp} />
        </div>

        <div className="reply-list">
          <div className="reply-header">全部回复</div>
          {reply.results.length > 0 ? (
            reply.results.map((item) => (
              <CommentItem
                key={item.com_id}
                type="reply"
                {...item}
                onThumbUp={() =>
                  onReplyCommentThumbUp(item.com_id, item.is_liking)
                }
              />
            ))
          ) : (
            <NoneComment />
          )}
        </div>

        <CommentFooter
          placeholder="去评论"
          type="reply"
          onShowArticleComment={() => setShowPopUp(true)}
        />
      </div>

      {/* 回复文本框对应的抽屉 */}

      <Popup className="reply-popup" position="bottom" visible={showPopup}>
        <CommentInput
          name={comment.aut_name}
          onAddComment={onAddComment}
          onClose={onReplyPopupHide}
        />
      </Popup>
    </div>
  )
}

export default Reply
